<!--
 * @Author: ningjz
 * @Date: 2022-03-15 14:12:16
 * @FileDescription: 服务价格查询
-->
<template>
  <div class="leftTop">
    <com-box>
      <loading v-show="state.loading" />
      <div class="nav-select">
        <div class="sel-input">
          <el-input
            clearable
            v-model="state.inputVal"
            placeholder="输入关键字"
            @input="state.classKey = ''"
          />
          <div class="sel-search" @click="state.classKey = ''">搜索</div>
        </div>
        <span
          :class="[
            'sel-title sel-til',
            { 'til-click': state.classKey === item.k }
          ]"
          v-for="item in state.keywordList"
          :key="item.k"
          @click="handKeyClick(item.k)"
          >{{ item.v }}</span
        >
      </div>
      <div class="nav-tab">
        <c-table
          class="tab-le"
          :tableClickItem="tableClickItem"
          :tableData="state.tableData"
          :classKey="state.classKey"
          :inputVal="state.inputVal"
          :mapData="state.map"
          @tableClick="handTableClick"
        ></c-table>
      </div>
    </com-box>
  </div>
</template>
<script lang="ts">
import { defineComponent, reactive } from 'vue'
import comBox from '@/components/comBox/comBox.vue'
import loading from '@/charts/loading.vue'
import { ElMessage } from 'element-plus'
import cTable from './table.vue'
import httpRequest from '@/service'
interface IClassState {
  k: string
  v: string
}
interface IState {
  loading: boolean
  tableData: any[]
  map: any
  classKey: string
  inputVal: string
  keywordList: IClassState[]
  getData: () => void
}
export default defineComponent({
  props: {
    tableClickItem: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  components: {
    comBox,
    loading,
    cTable
  },
  setup(props, { emit }) {
    const state: IState = reactive({
      loading: false,
      tableData: [],
      map: {},
      classKey: '',
      inputVal: '',
      keywordList: [],
      getData: () => {
        state.loading = true
        state.tableData = []
        httpRequest
          .get({ url: 'M2P3Fwjgcx' })
          .then((res) => {
            if (res.code === 200) {
              const resData = res.data
              resData.forEach((item: any, index: number) => {
                item.serviceNum = index + 1
              })
              state.tableData = resData
              state.keywordList = res.priceClass
              state.map = res.map
              emit('tableClick', {
                ...resData[0],
                show: true,
                lessTask: res.lessTask
              })
              state.loading = false
            }
          })
          .catch(() => {
            state.loading = false
          })
      }
    })
    const handKeyClick = (key: string) => {
      state.inputVal = ''
      if (state.classKey === key) {
        state.classKey = ''
      } else {
        state.classKey = key
        const listData = state.tableData.filter(
          (item: any) => item.classData === key
        )
        emit('tableClick', { listData })
      }
    }
    const handTableClick = (val: any) => {
      if (props.tableClickItem.length === 9) {
        ElMessage({
          message: '最多选择9条!',
          showClose: true,
          offset: 130,
          duration: 2000,
          type: 'warning'
        })
        return
      }
      emit('tableClick', val)
    }
    state.getData()
    return {
      state,
      handKeyClick,
      handTableClick
    }
  }
})
</script>
<style lang="less" scoped>
.leftTop {
  .sel-title {
    font-weight: 550;
    margin: 0px 5px;
    font-size: 16px;
    color: rgb(108, 170, 255);
    border-radius: 16px;
    background-color: rgba(17, 87, 192, 0.502);
    width: 88px;
    height: 31px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .sel-til {
    cursor: pointer;
    &:hover {
      background-color: rgb(64, 167, 255);
      color: #fff;
    }
  }
  .til-click {
    background-color: rgb(64, 167, 255);
    color: #fff;
  }
  .nav-select {
    padding: 20px 30px 12px 22px;
    white-space: nowrap;
    .sel-input {
      display: flex;
      align-items: center;
      width: 40%;
      margin-right: 20px;
      .sel-search {
        cursor: pointer;
        font-weight: 550;
        font-size: 18px;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: rgb(17, 87, 192);
        width: 78px;
        height: 31px;
      }
    }
    display: flex;
    align-items: center;
    color: #fff;
  }
}
::v-deep(.el-input .el-input__inner) {
  border-radius: 0px;
  color: rgb(160, 220, 255);
  border: none;
  background-color: rgba(13, 60, 130, 0.502) !important;
  height: 31px;
  text-indent: 1em;
  &::placeholder {
    color: rgba(160, 220, 255, 0.8);
  }
  &:focus {
    background-color: rgba(13, 60, 130, 0.502) !important;
  }
}
</style>
